<template>
  <div class="container">
    <ul class="service">
      <router-link
        v-for="(item, key) in service"
        :to="item.page" :key="key"
        :class="{active:key === index}"
        @click.native="serviceSkip(key)"
        tag="li">
        <i :class=item.icon></i>
        <span>{{item.text}}</span>
      </router-link>
    </ul>
  </div>

</template>

<script>
    export default {
        name: "sevice",
        data(){
            return{
                service:[
                    {
                        icon:'iconfont icon-icon128 green',
                        text:'我的订单',
                        page:{name:'pending',params:{highlight:'pending'}}
                    },
                    {
                        icon:'iconfont icon-hongbao red',
                        text:'红包卡劵',
                        page:{name:'home',params:{highlight:'home'}}
                    },
                    {
                        icon:'iconfont icon-dizhi waring',
                        text:'地址管理',
                        page:{name:'myAddress',params:{highlight:'myAddress'}}
                    },
                    {
                        icon:'iconfont icon-daifukuan waring',
                        text:'我的退款',
                        page:{name:'pending',params:{highlight:'pending'}}
                    },
                    {
                        icon:'iconfont icon-fapiao red',
                        text:'发票申请',
                        page:{name:'home',params:{highlight:'home'}}
                    },
                    {
                        icon:'iconfont icon-kefu green',
                        text:'联系我们',
                        page:{name:'home',params:{highlight:'home'}}
                    },
                    {
                        icon:'iconfont icon-women green',
                        text:'关于我们',
                        page:{name:'home',params:{highlight:'home'}}
                    },
                    {
                        icon:'iconfont icon-bangzhu waring',
                        text:'帮助中心',
                        page:{name:'pending',params:{highlight:'pending'}}
                    }
                ],
                index:'',
            }
        },
        methods:{
            serviceSkip(key){
                this.index = key;
            }
        },
        props:{
            highlight:{
                default:'home'
            }
        }

    }
</script>

<style scoped>
  .container{
    height: 100%;
    width: 100vw;
    overflow: hidden;
    background:#fff;
  }
    .service{
        list-style: none;
    }
    .service>li{
        background: #fff;
        display: inline-block;
        width: 25vw;
        height: 186px;
        text-align: center;
        box-sizing: border-box;
        border-width: thin;
        border-right: 2px solid #eee;
        border-bottom: 2px solid #eee;
    }
    .service>li>i{
      display: inline-block;
      font-size: 52px;
      margin-top: 20px;
      line-height: 100px;
    }
    .service>li>span{
      display: inline-block;
      font-size: 32px;
      color: RGB(68,68,68);
    }
    /*.service>li::before{
      content: '';
      display: inline-block;
    }*/
  .green{
    color:RGB(163,208,98);
  }
  .red{
    color: RGB(241,94,110);
  }
  .waring{
  color: RGB(254,196,100);
  }
</style>
